<template>
	<view>
		<!-- 
		注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用
		 
		1. new_index.nvue、index.nvue这两个是App页面
		 
		2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）
		 
		3. 请各位大神多多留手，我已经把请求内存开到最大了
		 
		4. 视频 id 切记是字符串类型 
		 -->
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
			:vertical="true" @animationfinish="animationfinish" @change="change" :current="current"
			:indicator-dots="false" @touchstart="mpTouchstart" @touchend="mpTouchend">
			<swiper-item v-for="(list,index) in dataList" :key="index">
				<view v-if="Math.abs(k-index)<=1">
					<view>
						<!-- 
						1.v-if：用于控制视频在节点的渲染数
						2.muted的默认值是 false，代表默认是禁音视频的
						3.http-cache默认开启视频缓存
						4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
						5.show-loading：这里默认去掉播放转圈的标志
						v-if="Math.abs(k-index)<=1"
						 -->
						<video v-if="isShow" :id="list._id+''+index" :loop="true" :muted="list.isplay" :controls="false"
							:http-cache="true" :page-gesture="false" :show-fullscreen-btn="false" :show-loading="false"
							:show-center-play-btn="false" :enable-progress-gesture="false" :src="list.src" @play="play"
							@ended="ended" @timeupdate="timeupdate" @click="tapVideoHover(list.state,$event)"
							:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000; z-index: -1;'"
							:poster="list.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"></video>
						<!-- 
						1.这里是封面（方案二）：这里的封面可以自定义。
						2.也在代码中做了批注，两种方案可以共存，不会相互影响。
						-->
						<image v-if="!list.playIng" :src="list.src+'?x-oss-process=video/snapshot,t_100,f_jpg'"
							:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; position: absolute;'"
							mode="aspectFit"></image>
					</view>
					<!-- 播放状态：pause 的时候就会暂停 -->
					<view class="videoHover" @click="tapVideoHover(list.state,$event)"
						:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
						<image v-if="list.state=='pause'" class="playState" src="@/static/img/index/play.png"></image>
					</view>
					<!-- 最底下的文字部分 -->
					<view class="content">
						<!-- <text class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.title}}</text>
						<text class="words" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.msg}}-{{k+1}}</text> -->
						<view class="name flex align-center">
							祖师奶奶三岁半
						</view>
						<view @click="$refs['pay-confirm'].open()" class="flex align-center">
							更新至20级
							<uni-icons type="forward" size="14" color="#ffffff"></uni-icons>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<pay-confirm ref="pay-confirm"></pay-confirm>
	</view>
</template>

<script>
	// import userList from '../new_index/data.js'//这个是假数据
	let audo = uni.createInnerAudioContext()
	audo.loop = true
	export default {
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				platform: "",
				model: "",
				deleteHeight: 0,
				dataList: [],
				k: 0,
				oldVideo: "",
				voice: "",
				timeout: "",
				current: 0,
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},

				videoID: "",
				isShow: false,

				showPlay: false, //转轮显示控制
				rotates: 0, //转轮旋转角度
				rotateTime: "", //转轮递归事件控制
				xrotats: "",

				mpcleartime: "",

				isClick: false,

				changeTimeout: "",
				mptime: 0,
				mpstartTime: 0,

				duration: 500
			}
		},
		components: {

		},
		watch: {
			async k(k, old_k) {
				this.isShow = false
				this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
				this.dataList[old_k].isplay = true
				this.dataList[old_k].state = 'pause'
				console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k]._id + '' + old_k)
				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
				uni.createVideoContext(this.dataList[old_k]._id + '' + old_k, this)
					.stop() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k]._id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
				console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～') //提示
				this.dataList[k].state = 'play'
				this.isShow = true
				this.xrotats = setTimeout(() => {
					this.showPlay = true;
				}, 200)
				clearTimeout(this.changeTimeout);
				this.dataList[k].isplay = false
				setTimeout(() => {
					this.dataList[k].playIng = true
				}, 250)
				if (this.mptime < 0.2) {
					this.changeTimeout = setTimeout(() => {
						uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
					}, 1400)
				} else {
					uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
				}
				var p = k + 1;
				console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p]._id + '' + p)
			}
		},
		onLoad() {
			this.platform = uni.getSystemInfoSync().platform
			this.model = uni.getSystemInfoSync().model
			var model = this.model
			if (this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !==
					'iPhone8')) {
				this.deleteHeight = 0 //有 tabbar的 修改这里可以改变视频高度
			}
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.boxStyle.height = this.windowHeight - this.deleteHeight; //有 tabbar的 修改这里可以改变视频高度
			this.get() //刚进入页面加载数据
		},
		onShow() {
			console.log('回到前台');
			if (this.dataList.length !== 0) {
				this.dataList[this.k].state = 'play';
				uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
			}
		},
		onHide() {
			this.dataList[this.k].state = 'pause';
			uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause()
			console.log('到后台');
		},
		methods: {
			mpTouchend() {
				this.mptime = (new Date() / 1000) - this.mpstartTime;
			},
			mpTouchstart() {
				this.mpstartTime = (new Date() / 1000);
			},
			clearTime() {
				//清理定时器
				for (let i = 0; i < 20; i++) {
					clearTimeout(this.rotateTime);
					clearTimeout(this.xrotats);
				}
			},
			closeScrollview() {
				// 点击评论里面的叉叉，就会关闭评论
				this.$refs.pinglun.close();
			},
			// 开始播放
			play() {
				console.log("start play")
			},
			// 播放结束
			ended() {
				// 1.播放当前视频结束时触发，自动切换下一个视频
				// this.current = this.k+1
			},
			// 播放进度变化事件
			timeupdate(e) {
				console.log(e.detail)
			},
			//点击播放&&暂停
			tapVideoHover(state, event) {
				console.log('state--', state);
				if (state == 'play' || state == 'continue') {
					this.dataList[this.k].state = 'pause';
				} else {
					this.dataList[this.k].state = 'continue';
				}
				if (this.dataList[this.k].state == 'continue') {
					this.isClick = true;
					this.dataList[this.k].playIng = true
					uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play(); //暂停以后继续播放
					this.dataList[this.k].isplay = false

				}
				if (this.dataList[this.k].state == 'pause') {
					uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause(); //暂停以后继续播放
					this.dataList[this.k].isplay = true
				}
			},
			change(event) {
				this.k = event.detail.current
			},
			animationfinish(event) {
				// 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
				if (this.k == this.dataList.length - 1) {
					this.GET()
				}
			},
			//每一组结束时新的请求
			GET() {
				uni.request({
					url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
					method: 'POST',
					data: {
						info: 'get_video'
					},
					success: (res) => {
						var msg = res.data.data
						// 2.这里把视频添加到视频列表
						for (let i = 0; i < msg.length; i++) {
							this.dataList.push(msg[i])
						}
					}
				})
			},
			get() {
				// 1.这里引入后端请求数据
				// var msg = userList
				uni.request({
					url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
					method: 'POST',
					data: {
						info: 'get_video'
					},
					success: (res) => {
						this.isShow = false;
						var msg = res.data.data
						// 2.这里把视频添加到视频列表
						for (let i = 0; i < msg.length; i++) {
							this.dataList.push(msg[i])
						}
						// 3.播放当前视频
						setTimeout(() => {
							this.isShow = true;
							// 如果是小程序端
							this.dataList[this.k].isplay = false
							this.dataList[this.k].state = 'play'
							this.dataList[this.k].playIng = true
							setTimeout(() => {
								uni.createVideoContext(this.dataList[this.k]._id + '' +
									this.k, this).play()
							}, 500)
						}, 200)
						this.videoID = this.dataList[this.k]._id
					}
				})
			},
		}
	}
</script>

<style>
	.container {
		background-color: #000000;
	}

	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0;
		left: 0;
		flex: 1;
		display: flex;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;

		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.5;
	}

	.userInfo {
		position: absolute;
		bottom: 110px;
		right: 10px;
		flex-direction: column;

	}

	.content {
		width: 720rpx;
		z-index: 99;
		position: absolute;
		bottom: 30px;
		/* justify-content: center; */
		padding: 15rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ffffff;
	}

	.userName {
		font-size: 30rpx;
		color: #ffffff;
		margin-top: 80upx;
	}

	.words {
		margin-top: 10rpx;
		font-size: 30rpx;
		color: #ffffff;
	}

	.root {
		background-color: #000000;
	}
</style>